class Magnifier{
    constructor(smallBox,mask,bigBox){
        this.oSmallBox = smallBox;
        this.oMask = mask;
        this.oBigBox = bigBox;
        this.eventBind();
    }

    mouseover(){
        let that = this;
        this.oSmallBox.onmouseover = function(){
            that.oMask.style.display = "block";
            that.oBigBox.style.display = "block";
        }
    }

    mouseout(){
        let that = this;
        this.oSmallBox.onmouseout= function(){
            that.oMask.style.display = "none";
            that.oBigBox.style.display = "none";
        }
    }

    mousemove(){
        let that = this;
        this.oSmallBox.onmousemove = function(evt){
            let e = evt || event;
            // console.log(that.oSmallBox.offsetLeft)

            let left = e.pageX - that.oSmallBox.offsetLeft - that.oMask.offsetWidth/2;
            let top = e.pageY - that.oSmallBox.offsetTop - that.oMask.offsetHeight/2;

            // let x = left * 4;
            // let y = top * 4;

            if(left < 0){
                left = 0;
            }

            let maxLeft = this.offsetWidth - that.oMask.offsetWidth;

            if(left > maxLeft){
                left = maxLeft;
            }

            if(top < 0){
                top = 0;
            }

            let maxTop = this.offsetHeight - that.oMask.offsetHeight;

            if(top > maxTop){
                top = maxTop;
            }

            let x = left * that.oBigBox.offsetWidth/that.oMask.offsetWidth;
            let y = top * that.oBigBox.offsetHeight/that.oMask.offsetHeight;

            that.oMask.style.left = left  + "px";
            that.oMask.style.top = top + "px";

            that.oBigBox.style.backgroundPositionX = -x + "px";
            that.oBigBox.style.backgroundPositionY = -y + "px";
        }
    }

    eventBind(){
        this.mouseover();
        this.mouseout();
        this.mousemove();
    }
}